.flex {
    display: flex;
  }
  
  .flex-jc-fe {
    justify-content: flex-end;
  }
  
  .flex-jc-c {
    justify-content: center;
  }
  
  .flex-jc-sa {
    justify-content: space-around;
  }
  
  .flex-jc-sb {
    justify-content: space-between;
  }
  
  .flex-ai-c {
    align-items: center;
  }
  
  .flex-ai-fs {
    align-items: flex-start;
  }
  
  .flex-ai-fe {
    align-items: flex-end;
  }
  
  .flex-ai-bl {
    align-items: baseline;
  }
  
  .flex-ac-fs {
    align-content: flex-start;
  }
  
  .flex-ac-c {
    align-content: center;
  }
  
  .flex-ac-fe {
    align-content: flex-end;
  }
  
  .flex-ac-sa {
    align-content: space-around;
  }
  
  .flex-ac-sb {
    align-content: space-between;
  }
  
  .flex-dir-c {
    flex-direction: column;
  }
  
  .flex-dir-cr {
    flex-direction: column-reverse;
  }
  
  .flex-wrap-w {
    flex-wrap: wrap;
  }
  
  .flex-wrap-wr {
    flex-wrap: wrap-reverse;
  }